<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>京东floor</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none
        }
        
        .LocationFloorList {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: -520px;
            display: none
        }
        
        .LocationFloorList li {
            height: 30px;
            line-height: 30px;
            width: 30px;
            font-size: 12px;
            text-align: center;
            border-bottom: 1px dashed #ccc;
            cursor: pointer;
        }
        
        .LocationFloorList li b {
            font-weight: normal
        }
        
        .LocationFloorList li span {
            display: none;
            font-size: 12px;
        }
        
        .LocationFloorList li.ac {
            color: #fff;
            background: red
        }
        
        .LocationFloorList li.ac b {
            display: none;
        }
        
        .LocationFloorList li.ac span {
            display: inline
        }
        
        .main {
            width: 960px;
            margin: 0 auto;
        }
        
        .floor {
            margin-bottom: 20px;
            height: 600px;
        }
        
        .floor h3 {
            background: #333;
            height: 30px;
            line-height: 30px;
            text-indent: 1em;
            color: #fff;
            font-size: 20px
        }
        
        .floor h3.ac {
            background: red
        }
        
        .floorA {
            background: #ccc;
        }
        
        .floorB {
            background: #eee;
        }
        
        .floorC {
            background: #ddd;
        }
        
        .floorD {
            background: #bbb;
        }
        
        .floorE {
            background: #aaa;
        }
        
        .floorF {
            background: #ccc;
        }
    </style>
    <script>
        window.onload = function() {
            var LocationFloorList = document.querySelector('.LocationFloorList');
            var aLi = LocationFloorList.querySelectorAll('li')
            var aFloor = document.querySelectorAll('.floor')
            window.onscroll = function() {
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    // 显示楼层编号
                    if (scrollTop > 100) {
                        LocationFloorList.style.display = 'block';
                    } else {
                        LocationFloorList.style.display = 'none';
                    }
                    // 根据楼层滚动位置定位编号
                    for (var i = 0; i < aFloor.length; i++) {
                        aFloor[i].index = i;
                        if (aFloor[i].offsetTop < scrollTop + 400) {
                            for (var j = 0; j < aFloor.length; j++) {
                                aLi[j].className = '';
                            }
                            aLi[aFloor[i].index].className = 'ac'
                        }
                    }
                }
                // 点击编号跳转到相对的楼层
            for (var l = 0; l < aFloor.length; l++) {
                aFloor[l].index = l;
                aFloor[l].onclick = function() {
                    var start = document.documentElement.scrollTop || document.body.scrollTop;
                    var end = aFloor[this.index].offsetTop;
                    animate(start, end)
                }
            }
            // animate
            var timer;

            function animate(start, end) {
                var dis = end - start;
                var count = parseInt(1500 / 30);
                var n = 0;
                clearInterval(timer)
                timer = setInterval(function() {
                    var speed = end - start > 0 ? Math.ceil((end - start) / 10) : Math.floor((end - start) / 10);
                    start += speed;
                    window.scrollTo(0, start);
                    if (start == end) clearInterval(timer);
                }, 30)
            }
        }
    </script>
</head>

<body>
    <div class="main">
        <div class="floor floorA">
            <h3>1服装</h3>
        </div>
        <div class="floor floorB">
            <h3>2电器</h3>
        </div>
        <div class="floor floorC">
            <h3>3手机</h3>
        </div>
        <div class="floor floorD">
            <h3>4美妆</h3>
        </div>
        <div class="floor floorE">
            <h3>5运动</h3>
        </div>
        <div class="floor floorF">
            <h3>6汽车</h3>
        </div>
        <div class="floor floorA">
            <h3>7玩具</h3>
        </div>
        <div class="floor floorB">
            <h3>8食品</h3>
        </div>
        <div class="floor floorC">
            <h3>9家具</h3>
        </div>
        <div class="floor floorD">
            <h3>10游戏</h3>
        </div>
        <div class="floor floorE">
            <h3>11图书</h3>
        </div>
        <div class="floor floorF">
            <h3>12手表</h3>
        </div>
    </div>

    <ul class="LocationFloorList">
        <li class="ac"><b>1F</b><span>服装</span></li>
        <li><b>2F</b><span>电器</span></li>
        <li><b>3F</b><span>手机</span></li>
        <li><b>4F</b><span>美妆</span></li>
        <li><b>5F</b><span>运动</span></li>
        <li><b>6F</b><span>汽车</span></li>
        <li><b>7F</b><span>玩具</span></li>
        <li><b>8F</b><span>食品</span></li>
        <li><b>9F</b><span>家具</span></li>
        <li><b>10F</b><span>游戏</span></li>
        <li><b>11F</b><span>图书</span></li>
        <li><b>12F</b><span>手表</span></li>
    </ul>


</body>

</html>

</html>